<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				position: fixed;
				/*
				如果不设置right和bottom两个，那么前面出现文档，还会把wrap顶下去。
				*/
				right: 50px;
				bottom: 50px;
				width: 50px;
				height: 50px;
				/* background: pink; */
			}

			#wrap>.inner {
				height: 100%;
			}

			#wrap>.inner>img {
				position: absolute;
				left: 0;
				top: 0;
				margin: 4px;
				border-radius: 50%;
			}

			#wrap>.home {
				/*
				一旦设置为absolute，那么高和宽就被内容撑开。如果不设置
				width和height，那么就不会显示
				*/
				position: absolute;
				left: 0;
				/*这个要紧跟在position后面*/
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				background: url(img/home.png) no-repeat;
				border-radius: 50%;
				transition: .5s;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<img src="img/clos.png">
				<img src="img/full.png">
				<img src="img/open.png">
				<img src="img/prev.png">
				<img src="img/refresh.png">
			</div>
			<div class="home"></div>
		</div>

		<script type="text/javascript">
			/***
			 *
			 * @param 
			 * return 
			 */
			function getPosition(length, deg) {
				return {
					left: Math.round(length * Math.sin(deg * Math.PI / 180)),
					top: Math.round(length * Math.cos(deg * Math.PI / 180))
				};
			}

			window.onload = function() {
				/*
				变换的坑
				1、元素首次渲染完成之后才会发生变换。
				2、如果变换函数的位置和个数不同，测不发生变换。例如：
				this.style.transform = flag ? "rotate(-360deg)" : "rotate(360deg)";
				这里面如果是：
				this.style.transform = flag ? "rotate(-360deg) scale(1)" : "rotate(360deg)";
				这样属于“个数不同”
				this.style.transform = flag ? "rotate(-360deg) scale(1)" : "scale(1) rotate(360deg)";
				这样属于“位置不同”
				*/
				var homeEle = document.querySelector("#wrap>.home");
				var flag = true;

				var imgs = document.querySelectorAll("#wrap>.inner>img");
				var tempDeg = 22.5;

				homeEle.onclick = function() {
					this.style.transform = flag ? "rotate(-360deg)" : "rotate(360deg)";

					for (var i = 0; i < imgs.length; i++) {
						var tempObj = flag ? getPosition(150, tempDeg * i) : {
							left: 0,
							top: 0
						};
						/*这里的第二个代表 延时的时间*/
						imgs[i].style.transition = "0.5s " + (i * 0.08) + "s";
						imgs[i].style.left = -tempObj.left + "px";
						imgs[i].style.top = -tempObj.top + "px";
						// debugger
					}

					flag = !flag;
				}

				function fn() {
					this.removeEventListener("transitionend", fn)
					this.style.transform = "scale(1)"
					this.style.opacity = 1
				}

				for (var i = 0; i < imgs.length; i++) {
					imgs[i].onclick = function() {
						/*这里记得清理 延时的时间*/
						this.style.transition = ".3s"
						this.style.transform = "scale(1.5)"
						this.style.opacity = 0.1

						this.addEventListener("transitionend", fn)
					}
				}
			}
		</script>
	</body>
</html>
